<template>
  <el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="editSampleDialog"
    :closeOnClickModal='false'>
    <span slot="title" class="dialog-title">
        编辑样品
      <el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
    </span>
    <div class="containercontent">
      <div style="height:150px;">


      <el-form label-width="110px" :inline="false" class="demo-form-inline form" :model="sampleForm" ref="sampleForm">
        <el-form-item label="样品名称" prop="name">
          <el-col :span="22">
            <el-input size="mini" v-model="sampleForm.name" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="样品编号" prop="newCode">
          <el-col :span="22">
            <el-input size="mini" v-model="sampleForm.newCode"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="任务" prop="taskName">
          <el-col :span="22">
            <el-input size="mini" v-model="sampleForm.taskName" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="采样日期" prop="collectionDate">
          <el-col :span="22">
            <el-date-picker v-model="sampleForm.collectionDate" type="date" size="mini" style="width:100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              placeholder="选择日期" disabled>
            </el-date-picker>
          </el-col>
        </el-form-item>
        <!--<el-form-item label="性状" prop="propertyOne">
          <el-col :span="22">
            <el-input size="mini" v-model="sampleForm.propertyOne"></el-input>
          </el-col>
        </el-form-item>-->

        <el-form-item label="采样人" prop="collectionMan">
          <el-col :span="22">
            <el-select v-model="sampleForm.collectionMan" size="mini" filterable style="width:100%;">
              <el-option v-for="item in userData" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="现场负责人" prop="collectionLeader">
          <el-col :span="22">
            <el-select v-model="sampleForm.collectionLeader" size="mini" filterable  style="width:100%;">
              <el-option v-for="item in userData" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!--<el-form-item label="采样要求" prop="request">
          <el-col :span="22">
            <el-input size="mini" v-model="sampleForm.request"></el-input>
          </el-col>
        </el-form-item>-->


        <el-form-item label="样品状态" prop="status">
          <el-col :span="22">
            <el-select v-model="sampleForm.status" placeholder="请选择" size="mini" disabled style="width:100%;">
              <el-option v-for="item in taskSampleStatus" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      </div>
      <!--<div class="selectw100 addbottle" style="margin-bottom:8px;float:right">
        <el-button type="primary" size="mini" @click="addbottletype">添加</el-button>
      </div>-->
      <!--<div style="height:calc(100% - 200px);overflow:auto;clear:both;">
          <el-table ref="sampleBottle" :data="sampleForm.sampleDetailBeans"  style="width: 100%" size="mini" v-if="reload">
            <el-table-column property="bottleType" label="容器材质" min-width="100px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.bottleType" placeholder="请选择" size="mini">
                  <el-option v-for="item in bottleOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column property="capacity" label="容器容量(mL)" min-width="130px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.capacity" size="mini" class="capacity deal"   oninput="this.value=this.value.replace(/[^0-9]+/,'');"></el-input>
              </template>
            </el-table-column>
            <el-table-column property="number" label="容器数量" min-width="130px">
              <template slot-scope="scope">
                <el-input  v-model="scope.row.number" size="mini" :min="1" oninput="this.value=this.value.replace(/[^0-9]+/,'');" class = "deal"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="100px">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="deletebottle(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>-->

    </div>
    <span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click="subEditSample">确 定</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>


  </el-dialog>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        sampleForm: {
          // propertyOne:null,
          factDate:null,
          collectionMan:null,
          collectionLeader:null,
        },
        userData: [], //人员
        reload:false,

      }
    },
    computed: {
      ...mapState(['enableStatus', 'taskSampleStatus','bottleOptions']),
    },
    watch: {
      addVisible(val, old) {
        if (val) {
          for (var i in this.sampleInfo) {
            this.sampleForm[i] = this.sampleInfo[i]
            this.$set(this.sampleForm,'newCode',this.sampleForm.code)
          }
		  console.log(this.sampleForm)

          // if(this.sampleForm.sampleDetailBeans == undefined || this.sampleForm.sampleDetailBeans.length == 0){
          //     // this.handleBottle();
          // }else{
          //   this.reload = true;
          // }
          this.readUser('')

        }
      }
    },
    props: ['newOrEdit', 'addVisible', 'sampleInfo'],
    mounted(){
      this.$store.dispatch("getAllBottles");


    },
    methods: {
      //  // 验证保留位数只能为整数
      // decNumber(val) {
      //   var reg = /^[1-9]\d*$/;
      //   var isInt = reg.test(Number(val));
      //   if (!isInt) {
      //    val = null;
      //   }
      // },
      readUser(item) {
        this.$http({
          method: 'post',
          apiUrl: '/resource/readEmployeeByLab.htm',
          params: { name: item },
          isJson: true,
        }).then(res => {
          if (res.code === 0) {
            this.userData = res.data;
          }

        })
      },
      handleBottle() {
        this.$http({
          method: 'post',
          apiUrl: '/detection/handleBottle.htm',
          params: {id: this.sampleForm.id},
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.sampleForm.sampleDetailBeans = res.data;
            this.reload = true;
          }

        })
      },
      // 是否重加载
    reLoad(){
        this.reload = false;
       this.$nextTick(()=>{
        //dom元素更新后执行，此时能拿到p元素的属性
        // this.message = this.$refs.myWidth.offsetWidth;
            this.reload = true;
      })
    },
      // 提交编辑后的样品数据
      subEditSample() {

        for(var i in this.userData){
          if(this.sampleForm.collectionMan == this.userData[i].account){
            this.sampleForm.collectionManName = this.userData[i].name;
          }
        }
        // collectionMan
        for(var i in this.userData){
          if(this.sampleForm.collectionLeader == this.userData[i].account){
            this.sampleForm.collectionLeaderName = this.userData[i].name;
          }
        }
        // for(var i in this.sampleForm.sampleDetailBeans){
        //     for(var j in this.bottleOptions){
        //         if(this.sampleForm.sampleDetailBeans[i].bottleType != ''){
        //           if(this.sampleForm.sampleDetailBeans[i].bottleType ==  this.bottleOptions[j].id){
        //               this.sampleForm.sampleDetailBeans[i].bottleName = this.bottleOptions[j].name;
        //           }
        //         }
        //     }
        // }
        var url = '/detection/updateTaskSamples.htm';
        this.$http({
          method: 'post',
          apiUrl: url,
          params: this.sampleForm,
          isJson: true,
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '提交成功'
            });


            this.close();
          }

        })
      },
      // 每个容器的样品新增一条
      addbottletype() {
        this.sampleForm.sampleDetailBeans.push({
          bottleType: '',
          number: '1',
          doCopy: false,
          capacity: '100',
          address: '',
          expireDate: null,
          doMust: false,
          doHas: true,
        })
      },
      // 删除样品容器
      deletebottle(index) {
        this.sampleForm.sampleDetailBeans.splice(index, 1);
      },
      close() {
        this.$parent.editSampleShow = false;
        this.sampleForm = {
          // propertyOne:null,
          factDate:null,
          collectionMan:null,
          collectionLeader:null,
        }
        this.$parent.readTaskSample(this.$parent.sampleQuery)
        this.reload = false;


      },

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .editSampleDialog .el-dialog {
    margin-top: 10vh !important;
    height: 80%;
  }

  .editSampleDialog .el-dialog .el-dialog__body {
    height: calc(100% - 85px);
    padding: 10px;
  }

  .editSampleDialog .el-dialog .el-dialog__body .el-form-item {
    width: 33%;
    float: left;
    margin-bottom: 10px;
  }

  .capacity .el-input-number__decrease,
  .capacity .el-input-number__increase {
    display: none;
  }
</style>
